<template>
	<view>
		<view class="title bg-[#E6EDFF]">
			<view class="text-[18px] _title">{{props.title}}</view>
			<view class="pt-[12rpx] text-[14px] leading-normal">{{describe}}</view>
		</view>
		<view class="uploader bg-[#fff] pb-[180rpx]">
			<van-uploader :file-list="fileList" @after-read="afterRead">
				<view class="text-center px-[30rpx] py-[40rpx] bg-[#fff] ">
					<van-image radius="20rpx" fit="cover" width="650rpx" height="440rpx" :src="image" />
				</view>
			</van-uploader>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineEmits,
		defineProps
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const fileList = ref([]);
	const props = defineProps({
		title: {
			type: String,
		},
		describe: {
			type: String
		},
		image: {
			type: String
		}
	})

	const emits = defineEmits(['afterRead'])
	const afterRead = (e) => {
		console.log(e.detail.file, 'e')
		emits('afterRead',e)
	}
</script>

<style scoped>
	._title{
		font-weight: bold;
	}
	.title {
		padding: 40rpx 30rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.uploader {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
</style>